<template>
    <div class="lookTask">
        <header>
            <span></span>整改任务发布
        </header>
        <div class="body">
            <el-form inline ref="QueryForm" :rules="this.QueryRules" :model="TaskKey">
                <el-form-item label="一级指标：" prop="orgId">
                    <el-select v-model="TaskKey.orgId" clearable placeholder="请选择一级指标">
                        <el-option v-for="(v, k) in orgdata" :key="k" :label="v.orgName" :value="v.orgId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级指标：" prop="leadDepartId">
                    <el-select v-model="TaskKey.leadDepartId" clearable placeholder="请选择二级指标">
                        <el-option v-for="(v, k) in departdata" :key="k" :label="v.departName" :value="v.departId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="三级指标：" clearable prop="deadLine">
                   <el-select v-model="TaskKey.leadDepartId" clearable placeholder="请选择二级指标">
                        <el-option v-for="(v, k) in departdata" :key="k" :label="v.departName" :value="v.departId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" icon="el-icon-search" @click="queryfn">查询</el-button>
                    <el-button type="success" size="small" icon="el-icon-plus" @click="addRecttask">添加</el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" plain @click="deletefn">删除</el-button>
                </el-form-item>
            </el-form>
            <div style="height:700px">
                <el-table border ref="multipleTable" :data="TaskData" @selection-change="selectionChange" stripe
                    :header-cell-style="{ background: '#6E96E9', textAlign: 'center' }">
                    <el-table-column align="center" type="selection" width="42">
                    </el-table-column>
                    <el-table-column label="一级指标" align="center" width="200" prop='firstIndex'>
                    </el-table-column>
                    <el-table-column label="二级指标" align="center" width="200" prop='secondIndex'>
                    </el-table-column>
                    <el-table-column label="三级指标" align="center" width="200" prop='thirdIndex'>
                    </el-table-column>
                     <el-table-column label="机构" align="center" prop='orgName'>
                    </el-table-column>
                    <el-table-column label="部门" align="center" width="180" prop='departName'>
                    </el-table-column>
                    <el-table-column label="得分" align="center" width="95" prop='score'>
                    </el-table-column>
                   
                    <el-table-column label="操作" align="center" width="180">
                        <template slot-scope="scope">
                            <el-button @click="EditTaskInfo(scope.row)" icon="el-icon-edit-outline" type="text"
                                style="color:#22C82D">修改</el-button>
                            <el-button type="text" icon="el-icon-delete" @click="DelteTaskInfo(scope.row)"
                                style="color:#E74C5E">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <footer style="float:right">
            <!-- page-size 每页显示条数  current-page当前页数  total总条数-->
            <el-pagination @size-change="sizechangefn" @current-change="getData" :current-page.sync="currentPage"
                :page-size.sync="pageSize" layout="total, prev, pager, next, jumper" :total="total" background>
            </el-pagination>
        </footer>
        <!-- 编辑弹出层 -->
        <el-dialog :visible.sync="EditDialog">
            <h5 style="font-size:18px;color:#333333;text-align:center;font-weight:none;margin-bottom:30px">修改</h5>
            <el-form ref="EditForm" :model="EditTask" label-width="80px" :rules="this.$store.state.EditRules">
                <el-form-item label="一级指标：" prop="firstIndex">
                    <el-input v-model="EditTask.firstIndex"></el-input>
                </el-form-item>
                <el-form-item label="二级指标：" prop="secondIndex">
                    <el-input v-model="EditTask.secondIndex"></el-input>
                </el-form-item>
                <el-form-item label="三级指标：" prop="thirdIndex">
                    <el-input v-model="EditTask.thirdIndex"></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="机构：" prop="orgId">
                            <el-select v-model="EditTask.orgId" placeholder="请选择机构">
                                <el-option v-for="(v, k) in orgdata" :key="k" :label="v.orgName" :value="v.orgId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="部门：" prop="departId">
                            <el-select v-model="EditTask.departId" placeholder="请选择活动部门">
                                <el-option v-for="(v, k) in departdata" :key="k" :label="v.departName"
                                    :value="v.departId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="评分：" prop="score">
                    <el-input placeholder="请输入评分" suffix-icon="el-icon-edit-outline" v-model="EditTask.score">
                    </el-input>
                    <span>分</span>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="EditTaskFn">确定修改</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import axios from "axios"
// import { getTaskInfo } from '../api/getTaskInfo'
export default {
    name: 'RectTaskRelease',
    data() {
        return {
            // 搜索的条件
            TaskKey: {
                orgId: '',
                leadDepartId: '',
                deadLine: ''
            },
            // 表格数据
            TaskData: [],
            // 每页条数
            pageSize: 10,
            // 总条数
            total: 0,
            // 当前页数
            currentPage: 1,
            // 是否显示添加弹出层,默认为flase
            EditDialog: false,
            // 编辑的表单
            EditTask: {},
            // 选中的数据
            SelectData: [],
            // 机构
            orgdata: [],
            // 部门
            departdata: [],
            QueryRules: {
                orgId: [
                    // { required: true, message: '请选择机构', trigger: 'change' }
                ],
                leadDepartId: [
                    // { required: true, message: '请选择部门', trigger: 'change' }
                ],
                deadLine: [
                    // { required: true, message: '请填写止期', trigger: 'change' }
                ]
            },
        }
    },
    methods: {
        //获取数据
        getData() {
            // 获取数据的条件
            // const term = {
            //     page: this.currentPage,
            //     size: this.pageSize,
            //     orgId: this.TaskKey.orgId,
            //     leadDepartId: this.TaskKey.leadDepartId,
            //     deadLine: this.TaskKey.deadLine
            // };
            let url = `http://101.201.29.183:3500/task/getTaskInfo?page=${this.currentPage}&size=${this.pageSize}`
            axios.post(url, {
                orgId: this.TaskKey.orgId,
                leadDepartId: this.TaskKey.leadDepartId,
                deadLine: this.TaskKey.deadLine
            },
            ).then(res => {
                if (res.data.success == true) {
                    this.TaskData = res.data.data;
                    this.total = res.data.total;
                } else {
                    this.$message.error(res.data.msg);
                }

            })
            // // // 发送请求
            // this.api.info.all(term).then((res) => {
            //     if (res.data.code == "success") {
            //         this.TaskData = res.data.data;
            //         this.total = res.data.total;
            //     } else {
            //         this.$message.error(res.data.msg);
            //     }
            // });
        },
        // 查询
        queryfn() {
            this.getData();

        },
        // 添加
        addRecttask() {
            this.$router.push({ name: 'addRectTask' })
        },
        // 删除
        deletefn() {
            if (this.SelectData.length == 0) {
                this.$alert('请选择任意一项', '提示', {
                    confirmButtonText: '确定',
                    callback: () => {
                        this.$message({
                            type: 'info',
                            message: `已取消删除`
                        });
                    }
                });
                return false;
            }
            let arr = [];
            this.SelectData.forEach((value) => {
                arr.push(value.id);
            });
            console.log(arr);
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                // 发送请求
                console.log('要删除的数据，要删除的数据', this.SelectData);
            }).catch(() => {
                this.$message.info("已取消删除");
            });
        },
        // 编辑
        EditTaskInfo(item) {
            console.log(item);
            this.EditDialog = true;
            this.EditTask = item
        },
        // 编辑提交
        EditTaskFn() {
            // 发送post请求修改数据
            this.$refs.EditForm.validate((valid) => {
                if (valid) {
                    let url = `http://101.201.29.183:3500/task/updateTaskInfo`
                    console.log("数据", this.EditTask);

                    axios.post(url, JSON.stringify({
                        indexId: this.EditTask.id,
                        firstIndex: this.EditTask.firstIndex,
                        secondIndex: this.EditTask.secondIndex,
                        thirdIndex: this.EditTask.thirdIndex,
                        score: this.EditTask.score,
                        orgId: this.EditTask.orgId,
                        departId: this.EditTask.departId,
                        modifyCode: "admin"
                    }),
                    ).then(res => {
                        if (res.data.success == true) {
                            this.getData()
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
                    this.EditDialog = false;
                    // 发送请求
                    console.log("编辑，发送请求", this.EditTask.id)
                } else {
                    return false;
                }
            });
            console.log(this.EditTask);
            this.getData();
        },
        // 删除单个提交
        DelteTaskInfo(data) {
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                console.log("删除发送请求", data.id);

                //   this.api.sciencearticle.del(data.id).then((res) => {
                //     if (res.data.code == 200) {
                //       this.$message.success('删除成功')
                //       this.gettabledata();
                //     } else {
                //       this.$message.error('删除失败')
                //     }
                //   });
            })
                .catch(() => {
                    this.$message.info("已取消删除");
                });
        },
        // 表格多选框
        selectionChange(val) {
            this.SelectData = val;
            console.log(val);
        },
        // 分页
        sizechangefn() {
            this.currentPage = 1;
            this.getData();
        },
        // 根据部门id获取部门名称
        getorgname(id) {
            console.log('id', id)
            console.log('部门', this.departdata);
            const a = this.departdata.find(item => {
                return item.departId === id
            });
            console.log(a)
            return a
        }
    },
    mounted() {
        console.log("当前id是",this.$route.params.id);
        this.getData();

        // this.api.org.all().then(res => {
        //     if (res.data.success == true) {
        //         this.orgdata = res.data.data
        //     }
        // });
        let url = `http://101.201.29.183:3500/Org/query`
        axios.get(url).then(res => {
            if (res.data.success == true) {
                this.orgdata = res.data.data;
            } else {
                this.$message.error(res.data.msg);
            }

        })
        this.api.depart.all().then(res => {
            if (res.data.success == true) {
                this.departdata = res.data.data
            }
        });


    },
}
</script>

<style scoped>
.lookTask {
    text-align: left !important;
}

.lookTask header span {
    display: inline-block;
    width: 4px;
    height: 16px;
    margin-right: 5px;
    background: rgb(110, 150, 233);
}

.lookTask header {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
}

::v-deep .el-form-item__label {
    width: auto !important;
    padding: 0 !important;
}

::v-deep .el-table thead {
    color: #fff;
}

.body {
    padding: 20px 0;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: #F0F4FD;
}

::v-deep .el-pagination .btn-prev,
::v-deep .el-pagination .btn-next {
    background: #fff;
    border: 1px solid #D7D7D7;
}

::v-deep .el-pagination.is-background .el-pager li {
    background: #fff;
    border: 1px solid #D7D7D7;
}

::v-deep .el-dialog .el-form {
    padding: 0 100px
}

::v-deep .el-dialog__header {
    height: 60px;
    background: #6E96E9;
    box-sizing: border-box;
}

::v-deep .el-dialog {
    width: 1100px;
}

::v-deep .el-dialog .el-button {
    width: 400px;
    height: 50px;
    display: block;
    background: #6E96E9;
    margin: 10px auto 0;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 20px;
    color: #fff
}

::v-deep .el-dialog .el-input--suffix {
    width: 224px;
    margin-right: 5px;
}
</style>